<script setup lang="ts">
import { ref } from 'vue';
import { dofinishregister } from '@/api/register'
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter()

const passwordOne = ref('')
const passwordTwo = ref('')
const knowTwo = /^[\w-]{4,16}$/
function onSubmit(){
    if(passwordOne.value!==passwordTwo.value){
        return showFailToast('两次密码需一致')
    }
    if(!knowTwo.test(passwordOne.value)){
      return showFailToast('密码格式错误');
    }
    dofinishregister({tel:window.localStorage.getItem('tel')||'',password:passwordOne.value}).then(res=>{
        // console.log(res)
        if(res.data.code!=='200'){
            return showFailToast(res.data.message)
        }

        showSuccessToast(res.data.message)
        router.push('/login')
    })
}
</script>



<template>
    <div>
        <h1>设置密码</h1>
        <p>请设置您的登陆密码</p>

        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="passwordOne" name="密码" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <van-field v-model="passwordTwo" name="密码" label="再次输入密码" placeholder="再次输入密码"
                    :rules="[{ required: true, message: '请再次输入密码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    完成注册
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<style lang="scss" scoped>
h1,
p {
    margin-left: 8%;
}
</style>